<template>
  <div class="container">
    <!-- 7光点的前部分音频 -->
    <audio ref="audioPlayer7before" @timeupdate="updateTime7before" :src="audioSrc7before" @ended="ended7before"></audio>
    <!-- 7光点的后部分音频 -->
    <audio ref="audioPlayer7after" :src="audioSrc7after" @ended="ended7after"></audio>
    <!-- 8光点的前部分音频 -->
    <audio ref="audioPlayer8before" @timeupdate="updateTime8before" :src="audioSrc8before" @ended="ended8before"></audio>
    <!-- 8光点的后部分音频 -->
    <audio ref="audioPlayer8after" :src="audioSrc8after" @ended="ended8after"></audio>
    <map-box ref="mapBoxRef" @marker-clicked="handleMarkerClick"></map-box>
    <div class="topLine">
      <div class="left">
        <div>
          <text @click="hiddenshow" v-if="(mapindex == 7 || mapindex == 8)">RETURN</text>
          <router-link v-if="!(mapindex == 7 || mapindex == 8)" to="/explore">RETURN</router-link>
        </div>
        <div class="navigator" v-if="!(mapindex == 7 || mapindex == 8)">
          <img src="@/assets/images/navigator.png" alt="" />
        </div>
      </div>
      <div class="center">杨鹏程/YANG PENGCHENG</div>
      <div class="RIGHT">THE PLANTS AROUND ME</div>
    </div>
    <!-- <div class="mask" @click="closeWindow" :class="{ show: showWindow }"></div> -->


    <!-- 当 mapindex == 7时 执行下面这段逻辑 -->

    <!-- 第7光点的逻辑 -->
    <!-- 第一个光点的图片集合 mapindex==7 -->
    <!--  点击图片得逻辑需要补充  mapindex==7  的时候 代表点了第一个光点   点了第一个光点淡入第一张图片  鼠标点击屏幕 淡入第二张图片  鼠标点击屏幕淡入第三张图片 以此类推 鼠标点击屏幕淡入第8张 到第8张的时候 点击屏幕又回到第一张循环 除非属于第一个光点的第一段音频结束 就显示详情页-->
    <div class="tuboxs" :class="{ show: mapindex == 7 }" @click="qiehuan7">

      <!-- 第一张图片 -->
      <div class="imgtuboxs animate__animated animate__bounce" :class="activeindex7 == 1 ? 'showactive' : 'noshow'">
        <!-- <div class="bagss" style="background-image: '@/assets/images/left/1.jpg'"></div> -->
        <div class="centerov ">
          <img class="tuimgs" src="https://ossdemo.ajioang.cn/7/1.jpg" />
        </div>
      </div>
      <!-- 第二张图片 -->
      <div class="imgtuboxs" :class="activeindex7 == 2 ? 'showactive' : 'noshow'">
        <div class="centerov">
          <img class="tuimgs" src="https://ossdemo.ajioang.cn/7/2.jpg" />
        </div>
      </div>
      <!-- 第三张图片 -->
      <div class="imgtuboxs" :class="activeindex7 == 3 ? 'showactive' : 'noshow'">
        <div class="centerov">
          <img class="tuimgs" src="https://ossdemo.ajioang.cn/7/3.jpg" />
        </div>
      </div>
      <!-- 第四张图片 -->
      <div class="imgtuboxs" :class="activeindex7 == 4 ? 'showactive' : 'noshow'">
        <div class="centerov">
          <img class="tuimgs" src="https://ossdemo.ajioang.cn/7/4.jpg" />
        </div>
      </div>
      <!-- 第五张图片 -->
      <div class="imgtuboxs" :class="activeindex7 == 5 ? 'showactive' : 'noshow'">
        <div class="centerov">
          <img class="tuimgs" src="https://ossdemo.ajioang.cn/7/5.jpg" />
        </div>
      </div>
      <!-- 第六张图片 -->
      <div class="imgtuboxs" :class="activeindex7 == 6 ? 'showactive' : 'noshow'">
        <div class="centerov">
          <img class="tuimgs" src="https://ossdemo.ajioang.cn/7/6.jpg" />
        </div>
      </div>
      <!-- 第七张图片 -->
      <div class="imgtuboxs" :class="activeindex7 == 7 ? 'showactive' : 'noshow'">
        <div class="centerov">
          <img class="tuimgs" src="https://ossdemo.ajioang.cn/7/7.jpg" />
        </div>
      </div>
      <!-- 第八张图片 -->
      <div class="imgtuboxs" :class="activeindex7 == 8 ? 'showactive' : 'noshow'">
        <div class="centerov">
          <img class="tuimgs" src="https://ossdemo.ajioang.cn/7/8.jpg" />
        </div>
      </div>
      <!-- 详情图 -->
      <div class="imgtuboxs" :class="isxiangqing7 ? 'showactive' : 'noshow'">
        <div class="centerov">
          <img class="tuimgs" src="https://ossdemo.ajioang.cn/7/detail.jpg" />
        </div>
      </div>


      <!-- 第7光点的逻辑 -->
      <div class=" topposition">
        <!-- 第一段音频 显示的音频里面文字  比如音频播放时间到 0：04-0：17  的时候 音频里面说 有人到宿舍里叫我们快跑 那么下面就显示这段文字  文字随着音频的时间 淡入显示  淡入的同时 把上一段文字淡出隐藏-->
        <!-- 0：04 - 0：17   这个表示 音频播放到4秒到17秒 时候显示下面这个 "有人到宿舍里叫我们快跑 17秒之后不显示下面得  下面得文案都是这个逻辑 需要补充下这里得逻辑" -->
        <text style="position: absolute;left:10%;top:27vh;"
          :class="4 < this.currentTime7 && this.currentTime7 < 17 ? 'showactive' : 'noshows'">有人到宿舍里叫我们快跑</text>
        <!--   0：36-0：40 -->
        <text style="position: absolute;left: 57%;top: 41vh;"
          :class="36 < this.currentTime7 && this.currentTime7 < 40 ? 'showactive' : 'noshows'">化肥的味,哎呀熏死了</text>
        <!--   0：44-0：47 -->
        <text style="position: absolute;    left: 19%;top: 58vh;"
          :class="44 < this.currentTime7 && this.currentTime7 < 47 ? 'showactive' : 'noshows'">我们楼下的味道太大了</text>
        <!--   1：01-1：04    1：01-1：04 代表1分钟01秒到1分钟04秒 一下都是这个规则 -->
        <text style="position: absolute;left:33%;top:46vh;"
          :class="60 + 1 < this.currentTime7 && this.currentTime7 < 60 + 4 ? 'showactive' : 'noshows'">跑出去了才知道</text>
        <!--    1：06-1：09-->
        <text style="position: absolute;left:64%;top:27vh;"
          :class="60 + 6 < this.currentTime7 && this.currentTime7 < 60 + 9 ? 'showactive' : 'noshows'">跑出来几十个</text>
        <!--  1：10-1：13-->
        <text style="position: absolute;left:14%;top:28vh;"
          :class="60 + 10 < this.currentTime7 && this.currentTime7 < 60 + 13 ? 'showactive' : 'noshows'">有个老头跑出来叫我们</text>
        <!--   1：16-1：21-->
        <text style="position: absolute;left: 13%; top: 42vh;"
          :class="60 + 16 < this.currentTime7 && this.currentTime7 < 60 + 21 ? 'showactive' : 'noshows'">那老头自己牺牲了</text>
        <!--    1：22-1：28-->
        <text style="position: absolute;  left: 62vw;top: 48vh;"
          :class="60 + 22 < this.currentTime7 && this.currentTime7 < 60 + 28 ? 'showactive' : 'noshows'">老头不知道是哪里人</text>
        <!--    1：31-1：36-->
        <text style="position: absolute;   left: 43vw;top: 77vh;"
          :class="60 + 31 < this.currentTime7 && this.currentTime7 < 60 + 36 ? 'showactive' : 'noshows'">就是那老头救了我们</text>
        <!--   1：31-1：34-->
        <text style="position: absolute;  left: 13vw;top: 59vh;"
          :class="60 + 31 < this.currentTime7 && this.currentTime7 < 60 + 34 ? 'showactive' : 'noshows'">叫我们快跑,里面漏气</text>
        <!--  1：38-1：43-->
        <text style="position: absolute;  left: 10%;top: 47vh;;"
          :class="60 + 38 < this.currentTime7 && this.currentTime7 < 60 + 43 ? 'showactive' : 'noshows'">不然他自己早跑了</text>
        <!-- 1：55-1：59-->
        <text style="position: absolute;left:40%;top:27vh;"
          :class="60 + 55 < this.currentTime7 && this.currentTime7 < 60 + 59 ? 'showactive' : 'noshows'">要是我们跑得慢小命都没了</text>
        <!--   2：04-2：08-->
        <text style="position: absolute;left:59%;top:44vh;"
          :class="120 + 4 < this.currentTime7 && this.currentTime7 < 120 + 8 ? 'showactive' : 'noshows'">老人也在里面打工</text>
        <!--   2：10-2：13-->
        <text style="position: absolute;left:67%;top:49vh;"
          :class="120 + 10 < this.currentTime7 && this.currentTime7 < 120 + 13 ? 'showactive' : 'noshows'">五六十岁吧</text>
      </div>

    </div>


    <!-- 第8光点的逻辑  需要ai补充 -->
    <!-- 第一个光点的图片集合 mapindex==8 执行下面这段逻辑-->
    <!-- mapindex==8  的时候 代表点了第一个光点  点了第一个光点淡入第一张图片  鼠标点击屏幕 淡入第二张图片  鼠标点击屏幕淡入第三张图片 以此类推 鼠标点击屏幕淡入第7张 到第7张的时候 点击屏幕又回到第一张循环 除非属于第一个光点的第一段音频结束 就显示详情页-->
    <div class="tuboxs" :class="{ show: mapindex == 8 }" @click="qiehuan8">
      <!-- 第一张图片 -->
      <div class="imgtuboxs" :class="activeindex8 == 1 ? 'showactive' : 'noshow'">
        <div class="centerov"> <img class="tuimgs" src="https://ossdemo.ajioang.cn/8/1.jpg" />
        </div>
      </div>
      <!-- 第二张图片 -->
      <div class="imgtuboxs" :class="activeindex8 == 2 ? 'showactive' : 'noshow'">
        <div class="centerov"> <img class="tuimgs" src="https://ossdemo.ajioang.cn/8/2.jpg" />
        </div>
      </div>
      <!-- 第三张图片 -->
      <div class="imgtuboxs" :class="activeindex8 == 3 ? 'showactive' : 'noshow'">
        <div class="centerov"> <img class="tuimgs" src="https://ossdemo.ajioang.cn/8/3.jpg" />
        </div>
      </div>
      <!-- 第四张图片 -->
      <div class="imgtuboxs" :class="activeindex8 == 4 ? 'showactive' : 'noshow'">
        <div class="centerov"> <img class="tuimgs" src="https://ossdemo.ajioang.cn/8/4.jpg" />
        </div>
      </div>
      <!-- 第五张图片 -->
      <div class="imgtuboxs" :class="activeindex8 == 5 ? 'showactive' : 'noshow'">
        <div class="centerov"> <img class="tuimgs" src="https://ossdemo.ajioang.cn/8/5.jpg" />
        </div>
      </div>
      <!-- 第六张图片 -->
      <div class="imgtuboxs" :class="activeindex8 == 6 ? 'showactive' : 'noshow'">
        <div class="centerov"> <img class="tuimgs" src="https://ossdemo.ajioang.cn/8/6.jpg" />
        </div>
      </div>
      <!-- 第七张图片 -->
      <div class="imgtuboxs" :class="activeindex8 == 7 ? 'showactive' : 'noshow'">
        <div class="centerov"> <img class="tuimgs" src="https://ossdemo.ajioang.cn/8/7.jpg" />
        </div>
      </div>
      <!-- 详情图 -->
      <div class="imgtuboxs" :class="isxiangqing8 ? 'showactive' : 'noshow'">
        <div class="centerov"> <img class="tuimgs" src="https://ossdemo.ajioang.cn/8/detail.jpg" />
        </div>
      </div>

      <!-- 第8光点的逻辑  需要ai补充 -->
      <div class=" topposition">
        {{ currentTime8 }} 123
        <!-- 第一段音频 显示的音频里面文字  比如音频播放时间到 0：04-0：17 的时候 音频里面说 有人到宿舍里叫我们快跑 那么下面就显示这段文字  文字随着音频的时间 淡入显示  淡入的同时 把上一段文字淡出隐藏-->
        <!--   0：01-0：02 -->
        <text style="position: absolute;    left: 10vw;top: 27vh;"
          :class="1 < this.currentTime8 && this.currentTime8 < 2 ? 'showactive' : 'noshows'">隔壁那个厂,我就住对面</text>
        <!--     0：04-0：06-->
        <text style="position: absolute;    left: 63vw;top: 71vh;"
          :class="4 < this.currentTime8 && this.currentTime8 < 6 ? 'showactive' : 'noshows'">看到大火烧起来</text>
        <!--     0：09-0：12 -->
        <text style="position: absolute;    left: 58vw;top: 36vh;"
          :class="9 < this.currentTime8 && this.currentTime8 < 12 ? 'showactive' : 'noshows'">看到火烧起来觉得他们好惨呀</text>
        <!--    0：12-0：14 -->
        <text style="position: absolute;    left: 13vw;top: 42vh;"
          :class="12 < this.currentTime8 && this.currentTime8 < 14 ? 'showactive' : 'noshows'">几千万就这么没了</text>
        <!--    0：17-0：22-->
        <text style="position: absolute;    left: 16vw;top: 68vh;"
          :class="17 < this.currentTime8 && this.currentTime8 < 22 ? 'showactive' : 'noshows'">火灾的时候我有拍过照片</text>
        <!--   0：30-0：33-->
        <text style="position: absolute;    left: 10vw;top: 26vh;"
          :class="30 < this.currentTime8 && this.currentTime8 < 33 ? 'showactive' : 'noshows'">我记得当时我和我朋友在视频聊天</text>
        <!--    0：36-0：39-->
        <text style="position: absolute;    left: 62vw;top: 40vh;"
          :class="36 < this.currentTime8 && this.currentTime8 < 39 ? 'showactive' : 'noshows'">刚好看到那边火烧起来了</text>
      </div>

    </div>
    <!-- 第二个光点的图片集合  mapindex==8  -->
    <div class="tuboxs"></div>
    <div class="popWindow" :class="{ show: showWindow, left: isLeft, right: !isLeft }">
      <div class="window">
        <!-- Content will be added here -->

      </div>
    </div>
  </div>
</template>
<script>
// import audioFile7before from "https://ossdemo.ajioang.cn/7/1.mp3"; // 导入音频文件
// import audioFile7after from "https://ossdemo.ajioang.cn/7/2.mp3"; // 导入音频文件
// import audioFile8before from "https://ossdemo.ajioang.cn/8/1.mp3"; // 导入音频文件
// import audioFile8after from "https://ossdemo.ajioang.cn/8/2.mp3"; // 导入音频文件
import MapBox from "@/components/mapBox/left.vue";
import 'animate.css'
export default {
  components: {
    'map-box': MapBox
  },
  data() {
    return {
      isxiangqing7: false,
      isxiangqing8: false,
      audioSrc7before: "https://ossdemo.ajioang.cn/7/1.mp3", // 绑定到 audio 元素的 src
      audioSrc7after: "https://ossdemo.ajioang.cn/7/2.mp3", // 绑定到 audio 元素的 src
      audioSrc8before: "https://ossdemo.ajioang.cn/8/1.mp3", // 绑定到 audio 元素的 src
      audioSrc8after: "https://ossdemo.ajioang.cn/8/2.mp3", // 绑定到 audio 元素的 src
      wordindex: 2,
      activeindex7: 1,
      activeindex8: 1,
      showWindow: null,
      isLeft: null,
      mapindex: null,
      currentImageIndex: 0, // 当前显示的图片索引
      imageCount: { 7: 8, 8: 7 }, // 每个光点对应的图片数量
      audio: null, // 音频对象
      currentTextIndex: -1, // 当前显示的文字索引
      isPlaying: false,
      currentTime8: 0,
      currentTime7: 0,
      textInterval: null, // 文字更新定时器
      audioEnded: false // 音频是否播放结束
    }
  },
  methods: {
    hiddenshow() {
      // 暂停所有音频
      [
        this.$refs.audioPlayer7before,
        this.$refs.audioPlayer7after,
        this.$refs.audioPlayer8before,
        this.$refs.audioPlayer8after,
      ].forEach(audio => {
        if (audio) {
          audio.pause();
          audio.currentTime = 0; // 重置音频播放位置
        }
      });

      // 重置所有状态变量
      this.isxiangqing7 = false;
      this.isxiangqing8 = false;
      this.activeindex7 = 1;
      this.activeindex8 = 1;
      this.mapindex = null;
      this.currentTime7 = 0;
      this.currentTime8 = 0;
      this.isPlaying = false;
    },
    // 7光点前部分音频 音频播放完毕 就播放7光点的后部分音频
    togglePlay7before() {
      const audio = this.$refs.audioPlayer7before;
      if (!audio) return;

      if (this.isPlaying) {
        audio.pause();
      } else {
        audio.play().catch((err) => {
          console.error("播放失败:", err);
        });
      }
      this.isPlaying = !this.isPlaying;
    },
    // 7光点的后部分音频
    togglePlay8after() {
      const audio = this.$refs.audioPlayer8after;
      if (!audio) return;
      // 直接播放，不依赖 isPlaying
      audio.play().catch(err => console.error("播放失败:", err));
    },
    // 7光点的后部分音频
    togglePlay7after() {
      const audio = this.$refs.audioPlayer7after;
      if (!audio) return;
      // 直接播放，不依赖 isPlaying
      audio.play().catch(err => console.error("播放失败:", err));
    },
    // 8光点前部分音频 音频播放完毕 就播放8光点的后部分音频
    togglePlay8before() {
      const audio = this.$refs.audioPlayer8before;
      if (!audio) return;

      if (this.isPlaying) {
        audio.pause();
      } else {
        audio.play().catch((err) => {
          console.error("播放失败:", err);
        });
      }
      this.isPlaying = !this.isPlaying;
    },
    ended8before() {
      this.isxiangqing8 = true //7光点的详情
      this.isPlaying = false; // 确保状态正确
      this.togglePlay8after()
    },
    ended7before() {
      this.isxiangqing7 = true //7光点的详情
      this.isPlaying = false; // 确保状态正确
      this.togglePlay7after()
    },
    updateTime8before() {
      //这个是光点8 的音频播放监听的时间
      // this.$set(this, 'currentTime8', this.$refs.audioPlayer7after.currentTime);
      this.currentTime8 = this.$refs.audioPlayer8before.currentTime;
      console.log(this.currentTime8)
    },
    updateTime7before() {
      //这个是光点7 的音频播放监听的时间
      this.currentTime7 = this.$refs.audioPlayer7before.currentTime;
    },
    formatTime(seconds) {
      if (isNaN(seconds)) return '00:00';
      const minutes = Math.floor(seconds / 60);
      const secs = Math.floor(seconds % 60);
      return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    },
    qiehuan8() {
      this.activeindex8 = this.activeindex8 + 1
      console.log(this.activeindex8)
      if (this.activeindex8 == 7) {
        this.activeindex8 = 1
      }
    },
    qiehuan7() {
      this.activeindex7 = this.activeindex7 + 1
      console.log(this.activeindex7)
      if (this.activeindex7 == 8) {
        this.activeindex7 = 1
      }
    },
    handleMarkerClick(markerData) {
      console.log(markerData)
      if (markerData.id == 'marker_1751206154549') {
        this.mapindex = 7;
        this.togglePlay7before()
      } else {
        this.mapindex = 8;
        this.togglePlay8before()
      }
      this.isLeft = markerData.lng > 0 ? false : true;
      this.showWindow = true;

    },

  },
}
</script>

<style lang="less" scoped>
.topposition {
  justify-content: center;
  justify-items: center;
  left: 0;
  top: 0;
  z-index: 9;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.topposition text {
  font-size: 27px;
}

.noshows {
  opacity: 0;
  transition: all 1s;
}

.noshow {
  opacity: 0;
  transition: all 0.3s;
}

.showactive {
  opacity: 1;
  transition: all 1s;
}

.tuimgs {
  height: 100vh;
  left: 50%;
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
}

.imgtuboxs {
  /* 修改为只显示当前图片 */
  display: none;

  &.active {
    display: flex;
  }
}

.wenzi text {
  position: absolute;

}

.tuimgs {

  position: absolute;
  display: block;
}

.tuboxs {}

.bagss {}

.wenzi {
  color: white;
  position: absolute;
  bottom: 20px;
  left: 50px;
  z-index: 999;
}


.show {
  visibility: visible;
  opacity: 1;
}

.tuboxs {
  background: rgba(9, 9, 19, 1);
}

.imgtuboxs {
  display: flex;
  justify-content: center;
  justify-items: center;
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(9, 9, 19, 1);
  backdrop-filter: blur(2px);
  z-index: 9;
  // visibility: hidden;
  // opacity: 1;
  // transition: all 0.3s;
}

.centerov {
  width: 100%;
  height: 100vh;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.tuboxs {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  // background: rgba(9, 9, 19, 0.5);
  // backdrop-filter: blur(2px);
  z-index: 9;
  visibility: hidden;
  opacity: 1;
  transition: all 0.3s;
}

.tuboxs.show {
  visibility: visible;
  opacity: 1;
}

.container {
  display: flex;
  justify-content: center;
  background: #080913;
  position: relative;
  height: 100vh;
  width: 100vw;
  align-items: center;
  overflow: hidden;
}

.topLine {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 3vh 6vw 1vh 6vw;
  font-size: 1vw;
  z-index: 999;
  background: #080913;

  .left {
    position: relative;
    z-index: 99999;

    a {
      color: #fff;
    }

    .navigator {
      position: absolute;
      left: 50%;
      top: 5vh;
      width: 4.5vw;
      transform: translateX(-50%);

      img {
        max-width: 100%;
      }
    }
  }
}

.mask {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(8, 9, 19, 0.4);
  backdrop-filter: blur(2px);
  z-index: 9;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;

  &.show {
    visibility: visible;
    opacity: 1;
  }
}

.popWindow {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;

  .window {
    position: absolute;
    pointer-events: all;
    width: 700px;
    left: 0;
    top: 0;
    z-index: 999;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    font-size: 0;
    left: 50%;
    transform: translateX(calc(-50% - 600px)) translateY(-50%);
    top: 50%;

    img {
      max-width: 100%;
    }
  }

  &.show {
    visibility: visible;
    opacity: 1;
  }

  &.right {
    transform: translateX(calc(50%));
  }
}
</style>